<style type="text/css">
.tg  {
    border-collapse: collapse;
    border-color: #ccc;
    border-spacing: 0;
    background-color: #fff; /* Vit bakgrund för hela tabellen */
}
.tg td {
    background-color: #fff; /* Vit bakgrund för cellerna */
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    overflow: hidden;
    padding: 10px 5px;
    word-break: normal;
}
.tg th {
    background-color: #f0f0f0; /* Ljusgrå bakgrund för rubrikceller */
    border-color: #ccc;
    border-style: solid;
    border-width: 1px;
    color: #333;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    overflow: hidden;
    padding: 10px 5px;
    word-break: normal;
}
.tg .tg-fkpb {
    background-color: #f0f0f0;
    border-color: inherit;
    text-align: left;
    vertical-align: top;
}
.tg .tg-0pky {
    border-color: inherit;
    text-align: left;
    vertical-align: top;
}

/* Modal stil */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 80%;
    max-height: 80%;
}

.close {
    position: absolute;
    top: 10px;
    right: 25px;
    color: white;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
}
.prev, .next {
    text-decoration: none;
    color: white;
    font-size: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.prev:hover, .next:hover {
    color: #ffeb3b;
}
</style>

<table class="tg" border="1"   style="undefined;table-layout: fixed; width: 990px; ">
    <colgroup>
        <col style="width: 30px">
        <col style="width: 100px">
        <col style="width: 60px">
        <col style="width: 400px">
        <col style="width: 100px">
        <col style="width: 100px">
        <col style="width: 100px">
        <col style="width: 100px">
        <col style="width: 100px">
        <col style="width: 100px">
    </colgroup>
    <thead>
        <tr>
            <th class="tg-0pky"><?php echo $count; ?></th>
            <th class="tg-0pky" colspan="2"><b><?php echo $kran; ?></b></th>
            <th class="tg-0pky" colspan="2">Datum: <b><?php echo $datum; ?></b></th>
            <th class="tg-0pky">Bild1</th>
            <th class="tg-0pky">Bild2</th>
            <th class="tg-0pky">Bild3</th>
            <th class="tg-0pky">Bild4</th>
            <th class="tg-0pky">Bild5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="tg-0pky"></td>
            <td class="tg-0pky" colspan="2"><?php echo $rubrik; ?></td>
            <td class="tg-0pky" colspan="2"><?php echo $inlagg; ?></td>

            <!-- Visa varje bild i en cell -->
            <?php foreach ($bilder as $index => $bild) : ?>
                <td class="tg-0pky" >
                    <img id="bild<?php echo $count . '-' . $index; ?>" src="<?php echo $bild; ?>" alt="Bild <?php echo $index + 1; ?>" style="width:100px;height:100px;" onclick="openModal(<?php echo $count; ?>, <?php echo $index; ?>)">
                </td>
            <?php endforeach; ?>
        </tr>

        <tr>
            <td class="tg-0pky"></td>
            
            <td class="tg-fkpb" colspan="4" style="vertical-align: middle;">Insänt av:&nbsp;&nbsp;<b><?php echo $insant; ?></b></td>
            <td class="tg-fkpb" colspan="3"style="vertical-align: middle;">Status: <font color="red"><b>Inskickad</b></font></td>
            
			 <td class="tg-fkpb"><a href="edit.php?id=<?php echo $id;?>"><button type="button" class="btn btn-primary">Editera</button></a></td>
			  <td class="tg-fkpb"><button type="button" class="btn btn-danger" onclick="confirmDelete(<?php echo $id; ?>)">Ta bort</button>
			  <script>
function confirmDelete(id) {
    if (confirm("Är du säker på att du vill ta bort denna post?")) {
        // If confirmed, redirect to the delete.php script with the ID
        window.location.href = "delete.php?id=" + id;
    }
}
</script>
</td>
        </tr>
    </tbody>
</table>